import React from 'react'
// ===================================================================== Temp
import Table from '#cpt/temp/Table'
// ===================================================================== Declare
const { $fn, $http, $Lazy } = window
// ===================================================================== Lazy
const Button 			= $Lazy.load(()=>import('@antd/button'))
const FoldItem 			= $Lazy.load(()=>import('../../cpt/fold-item'))
// ===================================================================== component
class Index extends React.Component{
	state = {
		data: [],
		selectedKeys: [],
		selectedRows: [],
		groupData: []
	}
	
	// 表单
	cols = [
		{ title: '批',			dataIndex: 'master_lot_number', 	width:100 },
		{ title: '分析物',		dataIndex: 'analyte_name', 			width:200 },
		{ title: '方法',			dataIndex: 'method_name', 			width:100 },
		{ title: '仪器',			dataIndex: 'instrument_kit_name', 	width:100 },
		{ title: '试剂',			dataIndex: 'reagent_type_name', 	width:240 },
		{ title: '单位',			dataIndex: 'unit_name', 			width:100 },
		{ title: '厂商',			dataIndex: 'manufacturer', 			width:200 },
		{ title: '基质',			dataIndex: 'matrix_name', 			width:100 },
		{ title: '水平',			dataIndex: 'levels', 				width:100 },
		{ title: '有效期',		dataIndex: 'expiration_date', 		...$fn.table.time }
	]
	
	componentDidMount() {
		this.getGroup()
	}
	
	getGroup = () => $http.pull(null, 'qc-test/list', {param: {type: 'lot'}}).then(data => this.setState({groupData: data}))
	
	setGroupTableRows = param => {
		$http.submit(null, 'qc-test/index', {param: {...param, enabled: 1}}).then(({items}) => {
			this.setState({data: items})
		})
	}
	
	btns = () => {
		const { selectedKeys, data } = this.state
		return [
			{label: '添加', 	onClick: () => {
				const index = data.findIndex(v => v.uuid === this.cRow.uuid)
				if(!~index){
					$http.submit(null, 'qc-test/info', { param: {uuid: this.cRow.uuid} }).then(row => this.setState({data: [...data, row]}))
				}else{
					$fn.msg.warning('已添加')
				}
			}, disabled: !$fn.hasObject(this.cRow)},
			{label: '添加所有', onClick: () => this.setGroupTableRows()},
			{label: '移除', 	onClick: () => {
				const newData = data.filter(v => v.uuid !== selectedKeys[0])
				this.setState({data: newData, selectedKeys: [], selectedRows: []})
			}, disabled: !selectedKeys.length},
			{label: '移除所有', onClick: () => this.setState({data: [], selectedKeys: [], selectedRows: []}), disabled: !data.length},
		]
	}
	
	render(){
		const { groupData } = this.state
		return <div className='w fx plr10 mb10' style={{height: 400}}>
			<div className='fv' style={{width: '30%'}}>
				<span className='b'>可用测试</span>
				<div className='bor1 ex oxys scrollbar quality plr10'>
					{ groupData.map(v => <FoldItem key={v.id} data={v} thisRef={this} onChange={(type, value) => {
						if(type){
							this.cRow = value
						}else{
							this.cRow = {}
						}
						this.type = type
						this.setState({})
					}} />) }
				</div>
			</div>
			<div className='fv plr10' style={{width: '90px', marginTop: '22px'}} key={this.state.btnKey}>
				{this.btns().map((v, i) => <Button key={i} className='mb10' ghost {...v} />)}
			</div>
			<div className='fv ex'>
				<span className='b'>所选测试</span>
				<div className='fx ex' style={{margin: '0 -10px'}}>
					{ Table.call(this, { type: 1, hasBottom:false }) }
				</div>
			</div>
		</div>
	}
}

export default Index